<template>
  <section class="business-join">
    <DivShell title="入驻商户">
      <div class="container">
        <div class="title">
          <p>
            <label>商户总数</label>
            <span>{{total}}</span>
          </p>
        </div>
        <div class="business-join-echart" id="business-join-echart"></div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
const echarts = require('echarts');
export default {
  name: "BusinessJoin",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      barChartObj:null,
      total:null,
      xData:['餐饮','金融','房产','购物','体育','医疗','教育','其它'],
      yData:[]
    };
  },
  computed: {
    ...mapGetters(['reBuildData']),
  },
  watch:{
    reBuildData: {
      handler(cval, oval) {
        this.setBusinessData();
        this.renderBarEcharts();
      },
      deep: true
    }
  },
  created(){
    this.setBusinessData();
  },
  mounted() {
    this.barChartObj = echarts.init(document.getElementById('business-join-echart'));
    this.renderBarEcharts();
  },
  methods: {
    setBusinessData(){
      var data = this.reBuildData.aoiStatist;
      this.yData=[data.restaurant,data.finance,data.housePeoperty,data.finance,data.sport,data.doctorTreat,data.education,data.other]
      this.total = this.yData.reduce((x,y)=>x+y,0);
    },
    renderBarEcharts(){
      var option={
          grid: {
              left: '0',
              right: '0',
              bottom: ''+Math.round(18*this.desgin1pxToCilent),
              top:''+Math.round(20*this.desgin1pxToCilent),
          },
          tooltip: {
            show:false,
            trigger: 'axis',
            axisPointer: {           
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          xAxis: {
              type: 'category',
              data: this.xData,
              nameTextStyle:{
                color:'#959DB4',
              },
              axisLabel:{
                color:'#959DB4',
              },
              axisTick:{
                show:false
              },
              splitLine:{
                show:false
              },
              axisLine:{
                show:false,
                lineStyle:{
                  color:'#4D5470',
                  type:'solid',
                  opacity:0.8
                }
              },
          },
          yAxis: {
              type: 'value',
              nameTextStyle:{
                color:'#959DB4',
              },
              axisLabel:{
                color:'#959DB4',
              },
              axisTick:{
                show:false
              },
              splitLine:{
                show:false,
                lineStyle:{
                  color:'#4D5470',
                  type:'dashed',
                  opacity:0.8
                }
              },
              axisLine:{
                show:false
              }
          },
          series: [{
              type: 'bar',
              barWidth:'' + Math.round(8*this.desgin1pxToCilent),
              label: {
                  show: true,
                  position: 'top',
                  color:'#9CA7C7',
                  fontSize:Math.round(14*this.desgin1pxToCilent)+'px'
              },
              itemStyle: {   
                //通常情况下：
                color:'#307FFF',
                //鼠标悬停时：
                // emphasis: {
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowColor: 'rgba(0, 0, 0, 0.5)'
                // },
              },
              data: this.yData,
          }]
          
        }
      this.barChartObj.setOption(option,true);
    },
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .business-join{
    margin-bottom: 18px;
    & .container{
      &>.title{
        padding-left: 49px;
        padding-right: 17px;
        box-sizing: border-box;
        height: 34px;
        line-height: 34px;
        display: flex;
        justify-content: space-between;
        background: url('../../../assets/img/business-icon.png') 4px center no-repeat;
        background-size: 28px 28px;
        & label{
          color: #B3BBD4;
          font-size: 14px;
          margin-right: 17.5px;
        }
        & span{
          font-size: 16px;
          background: linear-gradient(to right,#03DCEF,#307FFF);
          -webkit-background-clip:text;
          color: transparent;
        }
      }
      &>.business-join-echart{
        width: 100%;
        height: 190px;
      }
    }
  }
</style>
